<?php
/*
  Template Name: games
 */
?>

<?php
get_header();
?>
	<!-- CSS -->

	<link type="text/css" rel="stylesheet" href="<?php bloginfo('template_url'); ?>/sudoku/sudoku.css">

	



<div class="container-full clearfix" style="float:right" >
<h2  style="font-size:40px;">ألعب السودوكو</h2>
	<div id="Container">
	</div>

	<div id="Buttons">
		<p>أستخدم الفأره لتحديد الخانة التى ستضع بها الرقم</p>
		<p>أختر رقما من 1 الى 9 لا يتكرر فى الصف أو العمود</p>
		<button onclick="javascript:return makeBoard()">لعبة جديدة</button>
		<button onclick="javascript:return resetBoard()">أعادة اللعبة</button>
		<button onclick="javascript:return solveBoard()">حل اللعبة</button>
		<button onclick="javascript:return clearBoard()">مسح الخانات</button>
	</div>


	</div>

  <div class="sideBar">
            	
                <div class="importantNewsArea">
            <ul class="importantNewsTab clearfix">
                <li class="active">
                    <h2><a href="#theLatestNews">أحدث الأخبار</a></h2>
                    <div class="up-triangle"></div>
                </li>
                <li>
                    <h2><a href="#mostViews">الأخبار الأكثر أنتشارا</a></h2>
                    <div class="up-triangle"></div>
                </li>   
            </ul>

            <div class="importantNewsPosts" id="theLatestNews">
                <div class="scroll-pane">
                    <ul>
                        <?php
                        $newsCatId = get_cat_ID('news');
                        $posts = get_posts(array('category' => $newsCatId, 'numberposts' => 8));
                        $counter = 1;
                        foreach ($posts as $post) {
                            $colorCategory = getColorClassName($post);
                            $colorClassName = 'c' . $colorCategory->slug;
                            ?>
                            <li class="<?php echo $colorClassName; ?>">
                                <span><?php echo $counter; ?></span>
                                <h3><a href="#"><?php echo $post->post_title; ?></a></h3>
                            </li>
                            <?php
                            $counter++;
                        }
                        ?>
                    </ul>
                </div><!-- scroll-pane -->
            </div><!-- importantNewsPosts -->

            <div class="importantNewsPosts" id="mostViews">
                <div class="scroll-pane">
                    <ul>
                        <?php
                        $query = new WP_Query(array('cat' => $newsCatId, 'numberposts' => 8, 'meta_key' => '_count-views_all', 'orderby' => 'meta_value_num'));
                        while ($query->have_posts()) {
                            $query->the_post();
                            $colorCategory = getColorClassName(get_the_ID());
                            $colorClassName = 'c' . $colorCategory->slug;
                            $meta_values = get_post_meta(get_the_ID(), '_count-views_all', TRUE);
                            ?>
                            <li class="<?php echo $colorClassName; ?>">
                                <span><?php echo $meta_values; ?></span>
                                <h3><a href="<?php the_permalink(); ?>"><?php echo substr(get_the_title(), 0, 250); ?></a></h3>
                            </li>
                            <?php
                        }
                        wp_reset_postdata();
                        ?>
                    </ul>
                </div><!-- scroll-pane -->
            </div><!-- importantNewsPosts -->

        </div><!-- imprtantNewsArea -->
                
                <?php get_sidebar(); ?>
    </div><!-- sideBar -->

<div style="float:none; clear:both" ></div>
<?php get_footer(); ?>


<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/sudoku/sudoku.js"></script>